<template>
	<view class="orderList">
        <template v-if="orderList.length > 0">
            <view class="orderList_item" v-for="(item,index) in orderList" :key="index">
                <view class="order_header" @click="toOrderDetail(item)">
                    <view class="order_cinema">
                        {{ item.cinemaName }} 
                        <!-- <uv-icon size="17" color="#999" style="margin-left:22rpx;" name="arrow-right"></uv-icon> -->
                    </view>
                </view>
                <view class="order_body" @click="toOrderDetail(item)">
                    <view class="image" :style="`background-image:url(${item.movieLogo})`"></view>
                    <view>
                        <text>{{ item.movieName }} {{ item.quantity }}</text>
                        <view>{{ item.playTimeText }}</view>
                        <view>{{ item.roomName }}</view>
                        <view>{{ item.seatName }}</view>
                    </view>
                </view>
                <view class="order_footer">
                    总额：{{ item.orderAmount }}
                    <view>
                        <text v-if="item.orderStatusText != '创建'">{{ item.orderStatusText }}</text>
                        <!-- <text v-if="item.canPay" @click="showCancelModel(item)">取消订单</text> -->
                        <text v-if="item.canPay" style="margin-left:32rpx;color:red;" @click="toPay(item)">去支付</text>
                    </view>
                </view>
            </view>
        </template>
        <template v-if="orderList.length == 0 && noMore == 'nomore'">
            <view style="margin-top:35vh">
                <uv-empty mode="order"  width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg"></uv-empty>
            </view>
        </template>
        <uv-load-more v-else :status="noMore" />
        <uv-modal ref="dialogRef"
        :closeOnClickOverlay='false'
        :showConfirmButton="true"
        title="取消订单"
        confirmText="确认"
        cancelText="取消"
        :showCancelButton="true"
        @confirm="doCancel"
        @cancel="dialogRef.close()"
        >
            <view>你确认要取消<text style="color:red;font-weight:600;">{{ Order.playTimeText }}</text>观影安排吗？</view>
        </uv-modal>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad , onReachBottom} from "@dcloudio/uni-app"
import { getMovieOrderList , cancelOrder} from "@/api/movie"
const orderList = ref<any>([])
const pageNo = ref<any>(1)
const noMore = ref<any>('loading')
const dialogRef = ref()
const Order = ref<any>({})
const showCancelModel = (item : any) => {
    Order.value = item
    dialogRef.value.open()
}
const toOrderDetail = (item : any) => {
    if(item.orderStatusText != '创建'){
        uni.navigateTo({
            url:`/pages/movie/orderDetail?tradeno=${item.tradeno}`
        })
    }
}
const toPay = (item : any) => {
    uni.setStorageSync('Movie',{
        logo:item.movieLogo,
        name:item.movieName
    })
    uni.navigateTo({
       url:`/pages/movie/movieOrderConfirm?tradeno=${item.tradeno}`
    })
}
const doCancel = () => {
    cancelOrder({tradeno:Order.value.tradeno}).then(res => {
        if(res.sccess){
            uni.showToast({icon:'success',title:'取消成功！'})
            pageNo.value = 1
            orderList.value = []
            noMore.value = 'loadding'
            queryOrder()
        }else uni.showToast({icon:'none',title:res.msg})
    })
}
const queryOrder = () => {
    if(noMore.value == 'nomore')return;
    getMovieOrderList({
        page_no:pageNo.value,
        per:10,
    }).then(res => {
        if(res.success && res.data.length > 0){
            orderList.value = orderList.value.concat(res.data)
            if(res.data.length != 10){
                noMore.value = 'nomore'
            }else pageNo.value++
        }else{
            noMore.value = 'nomore'
        }
        
    })
}
onLoad((options : any) => {
    queryOrder()
})
onReachBottom(() => {
    queryOrder()
})
</script>

<style lang="scss">
.orderList{
    padding:32upx;
    .orderList_item{
        margin-bottom: 32upx;
        background:#fff;
        border-radius: 9px;
        padding:32upx;
        color:#666;
        .order_header{
            display:flex;
            padding-bottom:32upx;
            margin-bottom:32upx;
            justify-content: space-between;
            align-items: center;
            border-bottom:1px solid #f5f5f5;
            .order_cinema{
                display:flex;
                align-items: center;
            }
        }
        .order_body{
            display: flex;
            align-items: center;
            line-height: 1.3;
            font-size: 28rpx;
            .image{
                width:17vw;
                height:23vw;
                background-position:center;
                background-size:cover;
                background-repeat: no-repeat;
                margin-right:32upx;
                border-radius:3px;
            }
            text{
                font-size:36upx;
                color:#000;
                font-weight: 600;
                display:block;
                margin-bottom:22upx;
            }
        }
        .order_footer{
            margin-top:32upx;
            padding-top:32upx;
            border-top:1px solid #f5f5f5;
            display:flex;
            align-items: center;
            justify-content:space-between;
        }
    }
}
</style>
